<script setup lang="ts">
import router from "@/router";
import { ref } from "vue";
import { meetingStore } from "@/stores/frontData/he/main";
import { getHMS } from "@/utils/time";

const store = meetingStore();
const meeting = store.meeting;
// 立即报名
const appliMeeting = (id: any) => {
  router.push({ path: "/FrontMeet", query: { id: id } });
};
const peoNum = ref(23);
</script>
<template>
  <div class="block text-center">
    <el-carousel trigger="click" height="150px">
      <el-carousel-item
        v-if="meeting.length > 0"
        v-for="item in meeting"
        :key="item"
      >
        <section class="meet">
          <!-- 左-会议介绍 -->
          <div>
            <p class="title">会议名称：{{ item.meetingName }}</p>

            <ul>
              <li>
                <p>会议开始时间： {{ getHMS(item.meetingStartTime) }}</p>
                <!-- <p>培训区域：{{ item.trainingArea }}</p> -->
              </li>
              <li>
                <!-- <p>会议模式:{{ item.meetingMode }}</p> -->
                <p>报名截止时间：{{ getHMS(item.meetingDeadline) }}</p>
              </li>
            </ul>
          </div>
          <!-- 右-报名 -->
          <div>
            <!-- <template #default="scope"> -->
            <el-button
              plain
              type="primary"
              @click="appliMeeting(item.meetingId)"
              >立即报名</el-button
            >
            <!-- </template> -->
            <span id="has">{{ peoNum }}已报名</span>
          </div>
        </section>
      </el-carousel-item>
      <el-carousel-item v-else>
        <el-empty description="暂无会议" :image-size="50" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<style scope>
/* 轮播 */
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  /* color: #475669; */
  opacity: 0.75;

  margin: 0;
  text-align: center;
}
.el-carousel {
  border: 1px solid black;
  /* background-color: white; */
}

.el-carousel__item:nth-child(2n) {
  background-color: #d3dce6;
  height: 150px;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
  height: 150px;
}
li {
  list-style-type: none;
}
.meet li p {
  font-size: 12px;
  color: black;
}
li:last-child p:last-child {
  font-size: 13px;
  font-weight: bold;
}
.meet {
  /* border: 1px solid black; */
  padding: 15px 30px;
  display: flex;
  justify-content: space-around;
}
.title {
  font-weight: bold;
  font-size: 16px;
}

#has {
  color: #409eff;
  font-size: 12px;
}
.el-empty {
  height: 100%;
}
</style>
